<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta charset="UTF-8" />
	<title>JQuery UX Form</title>

	<style type="text/css">
		/* Fix the make themes look like they do on jqueryui.com */
		body {
			margin: 0;
			padding: 0 0 20px;
			min-height: 100%;
			font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
			font-size: 10px;
		}
	</style>

	<link rel="stylesheet" type="text/css" href="../themes/jquery-ui-1.10.3.css" />

	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.inputbox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.textbox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.filebox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.selectbox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.checkbox.css" />
	<link rel="stylesheet" type="text/css" href="../themes/jquery.form.radio.css" />


	<script type="text/javascript" src="../jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../jquery-ui-1.10.3.js"></script>

	<script type="text/javascript" src="../form/jquery.form.form.js"></script>
	<script type="text/javascript" src="../form/jquery.form.inputbox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.textbox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.filebox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.selectbox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.checkbox.js"></script>
	<script type="text/javascript" src="../form/jquery.form.radio.js"></script>

	<script type="text/JavaScript">
		$(document).ready(
			function() {
				$('form').form({
					ajax: true,
					validation: {
						'textbox': {
							live: true,
							required: true,
							minLength: 3,
							maxLength: 25
						},
						'passwordbox': {
							live: false,
							required: true
						},
						'select_inline': {
							live: true,
							required: true
						},
						'select_dropdown': {
							live: true,
							required: true
						},
						'gender': {
							live: true,
							required: true,
							check: function(widget) {
								widget.attr('title', 'Always an error');
								return false;
							}
						}
					}
				});

				$('#loading').hide('fade', {}, 500);
				$('#form').show('fade', {}, 500 );
			}
		);
	</script>
</head>

<body>

	<div id="wrapper" style="width: 600px;">
		<div id="loading">
			<img src="images/loading.gif" alt="loading..." style="position: absolute; top: 50%; left: 50%;" />
		</div>

		<div id="form" style="display: none;">
			<form action="noaction" method="post" id="demo_form">
				<fieldset style="padding: 10px;">
					<legend>jQuery UX Form</legend>

					<table style="width: 100%;">
						<tr>
							<td>
								<label for="textbox">Text Box</label>
							</td>
							<td>
								<input type="text" name="textbox" id="textbox" maxlength="32" />
							</td>
						</tr>

						<tr>
							<td>
								<label for="select_inline">Select Inline</label>
							</td>
							<td>
							    <select name="select_inline" id="select_inline" multiple="multiple" size="4">
							        <optgroup label="Section 1">
							    		<option value="1">Item 1</option>
							    		<option value="2" selected="selected">Item 2</option>
							    		<option value="3">Item 3</option>
							    		<option value="4">Item 4</option>
						    		</optgroup>
						    		<optgroup label="Section 2">
							    		<option value="5">Item 5</option>
							    		<option value="6">Item 6</option>
							    		<option value="7">Item 7</option>
							    		<option value="8">Item 8</option>
						    		</optgroup>
							    </select>
							</td>
						</tr>


						<tr>
							<td>
								<label for="select_dropdown">Select Dropdown</label>
							</td>
							<td>
							    <select name="select_dropdown" id="select_dropdown" style="width: 50%;">
							        <option value="">Select one...</option>
							        <optgroup label="Section 1">
							    		<option value="1">Item 1</option>
							    		<option value="2" selected="selected">Item 2</option>
							    		<option value="3">Item 3</option>
							    		<option value="4">Item 4</option>
						    		</optgroup>
						    		<optgroup label="Section 2">
							    		<option value="5">Item 5</option>
							    		<option value="6">Item 6</option>
							    		<option value="7">Item 7</option>
							    		<option value="8">Item 8</option>
						    		</optgroup>
						    		<optgroup label="Section 3">
							    		<option value="long">Really Really Long Item</option>
						    		</optgroup>
							    </select>
							</td>
						</tr>


						<tr>
							<td>
								<label for="file_box">File Box</label>
							</td>
							<td>
								<input type="file" name="file_box" id="file_box" style="width: 100%;" />
							</td>
						</tr>

						<tr>
							<td>
								Radio
							</td>
							<td>
								<table style="width: 100%">
									<tr>
										<td>
											<input type="radio" name="gender" id="male" value="male" />
											<label for="male">Male</label>
										</td>
										<td>
											<input type="radio" name="gender" id="female" value="female" checked="checked" />
											<label for="female">Female</label>
										</td>
									</tr>
								</table>
							</td>
						</tr>


						<tr>
							<td>
								Items
							</td>
							<td>
								<table style="width: 100%">
									<tr>
										<td>
											<input type="checkbox" name="items" id="item1" value="item1" checked="checked" />
											<label for="item1">Item 1</label>
										</td>
									</tr>
									<tr>
										<td>
											<input type="checkbox" name="items" id="item2" value="item2" />
											<label for="item2">Item 2</label>
										</td>
									</tr>
									<tr>
										<td>
											<input type="checkbox" name="items" id="item3" value="item3" disabled="disabled" />
											<label for="item3">Item 3 Disabled</label>
										</td>
									</tr>
									<tr>
										<td>
											<input type="checkbox" name="items" id="item4" value="item3"  checked="checked" disabled="disabled" />
											<label for="item3">Item 4 Disabled</label>
										</td>
									</tr>
								</table>
							</td>
						</tr>

						<tr>
							<td>
								<label for="text_area">Text Area</label>
							</td>
							<td>
								<textarea name="text_area" id="text_area" rows="3" cols="20" style="width: 100%;">test</textarea>
							</td>
						</tr>


						<tr>
							<td></td>
							<td>
								<input id="submit" type="submit" />
								<input id="reset" type="reset" />
							</td>
						</tr>
					</table>

				</fieldset>
			</form>
		</div>
	</div>


</body>
</html>
